{include file="public/head"/}

<body class="gray-bg">

<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name" style="font-size: 12rem">HGS</h1>
        </div>
        <h3>欢迎使用 <small style="color: silver">HUIONE.HGS</small></h3>
        <div class="m-t">
            <div class="form-group">
                <input id="username" type="text" class="form-control" placeholder="用户名" required="">
            </div>
            <div class="form-group">
                <input id="password" type="password" class="form-control" placeholder="密码" required="">
            </div>
            <div class="form-group">
                <input type="text" id="code" class="form-control" placeholder="请输入验证码" style=""/>
                <span style="position:absolute;top:33.2rem; background-color: #f23030;color:white;border-radius: 2px;padding:3px 15px;right:1rem" id="send">获取</span>
            </div>
            <button id="sub" type="button" class="btn btn-primary block full-width m-b">登 录</button>
        </div>
    </div>
</div>
{include file="public/footer"}

<script>
    $(function () {
        var flag;
        var flag1 = true;
        //发送验证吗
        $("#send").on('click',function(){
            if(flag1) {
                flag1 = false

                $.ajax({
                    type:"POST",
                    url:"{:url('Open/SendCode')}",
                    data:{
                        username:$('#username').val(),
                    },
                    dataType:"json",
                    success:function(data){
                        console.log(data)
                        if(data.status == 1){
                            alert(data.message);
                            var time = 60;
                            var interval = setInterval(function(){
                                time -= 1;
                                $("#send").text(`剩余时间${time}`);
                                if(time == 0){
                                    clearInterval(interval)
                                    $("#send").text('重新发送');
                                    flag1 = true
                                }
                            },1000)
                        }else{
                            alert(data.message);
                            window.location.reload()
                        }
                    }
                });
            }
        })
    })


    $("#sub").on('click',function(){
        $.ajax({
            type:"post",
            url:"{:url('Open/Login')}",
            data:{
                username:$('#username').val(),
                password:$('#password').val(),
                code : $("#code").val()
            },
            dataType:"json",
            success:function(data){
                if(data.status == 1){
                    
                    layer.msg(data.message,{icon: 6,time:1500},function () {
                        window.location.href="{:url('Index/index')}";
                    });
                }else{
                    layer.msg(data.message,{icon: 5,time:1500});
                }
            }
        });
    })


    $(document).keypress(function(e){
        if(e.which == 13) {
            $.ajax({
                type: "post",
                url: "{:url('Open/Login')}",
                data: {
                    username: $('#username').val(),
                    password: $('#password').val(),
                    code : $("#code").val(),
                },
                dataType: "json",
                success: function (data) {
                    if(data.status == 1){
                        layer.msg(data.message,{icon: 6,time:1500},function () {
                            window.location.href="{:url('Index/index')}";
                        });
                    }else{
                        layer.msg(data.message,{icon: 5,time:1500});
                    }
                }
            });
        }
    })
</script>
</body>
</html>
